<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 左浮动和右浮动可以同时使用 */
        /* 垂直显示的盒子，不要设置浮动，只有并排显示的盒子才要设置浮动 */
        /* 大盒子带着小盒子跑，一个大盒子中又是一个小天地，可以继续使用浮动 */
        /* div是免费的，不要节约盒子 */
        *{margin:0;padding:0;}
        header{
            width: 1000px;
            height: 100px;
            margin: 0 auto;
            
        }
        .content{
            width: 1000px;
            height: 500px;
            margin: 20px auto;
            
        }
        footer{
            width: 1000px;
            height: 100px;
            margin: 0 auto;
            background-color: #333;
        }
        header .logo{
            float: left;
            width: 220px;
            height: 100px;
            background-color: orange;
        }
        header .login{
            float: right;
            width: 220px;
            height: 30px;
            background-color: orange;
        }
        header nav{
            float:right;
            width: 600px;
            height: 50px;
            margin-top: 20px;
            background-color: blue;
        }
        .content .ad{
            float: left;
            width: 300px;
            height: 500px;
            background-color: blue;
        }
        .content main{
            float: right;
            width: 680px;
            height: 500px;
        }
        .content main .banner{
            width: 680px;
            height: 380px;
            background-color: red;
        }
        .content main .pics{
            width: 680px;
            height: 100px;
            margin-top: 20px;
        }
        .content main .pics ul{
            list-style: none;
        }
        .content main .pics ul li{
            float:left;
            background-color:yellow;
            height:100px;
            width:160px;
            margin-right: 10px;
        }
        .content main .pics ul li:last-child{
            width:170px;
            margin:0;
        }
    </style>
</head>
<body>
    <header>
        <div class="logo"></div>
        <div class="login"></div>
        <nav></nav>
    </header>
    <section class="content">
        <aside class="ad"></aside>
        <main>
            <div class="banner"></div>
            <div class="pics">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </main>
    </section>
    <footer></footer>
</body>
</html>